iT邦幫忙

DAY 8
2

開發 Mobile 手機的新一代霸主-ionic framework系列 第 8

初探 ionic 中的 AngularJS(上)

  • 分享至 

  • xImage
  •  

這個部份介紹ionic 中使用AngularJS 的雙向綁定(Two way data-binding)及依賴注入(DI)

雙向綁定(Two way data-binding)

data-binding 在View 與 Controller 之間,AngularJS 藉由 Model 來做為資料二者之前的傳遞,所以無論你在 View 修改了什麼內容,或是在 Controller 這端修改了 Model 內容,只要有綁定變數的都會即時被render。

例如: 可以藉由$scope 可以存放在該 controller 內的變數,ng-model 可以直接把指定的變數與$scope中的做data-binding。

請打開 template/tab-account.html ,試著加入一個輸入元件,變數指定為 account

另外開發 js/controller.js 中 ,修改一下AccountCtrl 的controller,加入$scope.account可以指定預設的變數值。

呈現的結果畫面,應該會如下

可以直接修改 username ,就可以即時同步yout account is xxxx

依賴注入(DI)

在controller 中的常會使用的 $scope,它就是一種注入的方式

自行開發的Factory也是可以被注入使用的

以上的Data-Binding 及 DI 二個功能,是不是覺得AngularJS 很神奇呢,但不要因為這樣就滿足了,實作 Data-Binding 的Framework 不只有 AngularJS ,所以當然 AngularJS強大的不只是這樣而己,讓我們明天繼續看下去


上一篇
當ionic遇上AngularJS
下一篇
初探 ionic 中的 AngularJS(下)
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言